<template>
    <div>
        <p>为了达成统一的用户体验，你可以直接使用AOS4V提供的样式库</p>
        <p>
            <span>这些样式以</span>
            <i class="code-inline">c</i>
            <span>开头，取义</span>
            <i class="code-inline">common</i>
            <span>，然后搭配上一些约定俗成的字母组合，比如：</span>
            <i class="code-inline">b</i>
            <span>
                <span>，表示</span>
                <i class="code-inline">border</i>
                <span>或者</span>
                <i class="code-inline">bottom</i>
            </span>
        </p>
        <h4>详细的字母组合表意参考</h4>
        <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
            <p>{{ type.name }}</p>
            <a-table
                :dataList="type.charList"
                :headerList="headerList"
            ></a-table>
        </div>
        <p>除了这些规则，还有另外一些方便的写法</p>
        <p>
            <span>禁用某个样式，可以在后面加</span>
            <i class="code-inline">-0</i>
            <span>表示禁用此样式，比如：</span>
            <i class="code-inline">c-p-t-0</i>
            <span>表示禁用顶部内边距</span>
        </p>
        <p>
            <span>如果要对全部方向使用样式，移除方向指定即可，比如：</span>
            <i class="code-inline">c-p-s</i>
            <span>表示添加全部方向的内边距</span>
        </p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            headerList: [
                { name: 'name', text: '名称' },
                { name: 'sence', text: '表意' },
                { name: 'example', text: '举例' },
            ],
            typeList: [
                {
                    name: '间距',
                    charList: [
                        { name: 'm', sence: 'margin', example: 'c-m-t-s' },
                        { name: 'p', sence: 'padding', example: 'c-p-t-s' },
                    ]
                },
                {
                    name: '方向',
                    charList: [
                        { name: 't', sence: 'top', example: 'c-m-t-s' },
                        { name: 'r', sence: 'right', example: 'c-p-r-s' },
                        { name: 'b', sence: 'bottom', example: 'c-p-b-s' },
                        { name: 'l', sence: 'left', example: 'c-p-l-s' },
                    ]
                },
                {
                    name: '色彩主题',
                    charList: [
                        { name: 'default', sence: '默认', example: 'c-color-default' },
                        { name: 'primary', sence: '主色', example: 'c-color-primary' },
                        { name: 'secondary', sence: '次要色', example: 'c-color-secondary' },
                        { name: 'success', sence: '成功', example: 'c-color-success' },
                        { name: 'warning', sence: '警告', example: 'c-color-warning' },
                        { name: 'error', sence: '错误', example: 'c-color-error' },
                    ]
                },
                {
                    name: '色彩主题的应用',
                    charList: [
                        { name: 'theme-color', sence: '使用主题的主题色作为前景色', example: 'c-theme-color-primary' },
                        { name: 'front-color', sence: '使用主题的前景色作为前景色', example: 'c-front-color-primary' },
                        { name: 'bg-color', sence: '使用主题的背景色作为背景色', example: 'c-bg-color-primary' },
                        { name: 'color', sence: '同时使用主题的前景/背景色作为前景/背景色', example: 'c-color-primary' },
                    ]
                },
                {
                    name: '尺寸',
                    charList: [
                        { name: 'xs', sence: '更小', example: 'c-m-t-xs' },
                        { name: 's', sence: '小', example: 'c-m-t-s' },
                        { name: 'm', sence: '中等', example: 'c-m-t-m' },
                        { name: 'l', sence: '大', example: 'c-m-t-l' },
                        { name: 'xl', sence: '更大', example: 'c-m-t-xl' },
                    ]
                },
                {
                    name: '其他',
                    charList: [
                        { name: 'b', sence: 'border', example: 'c-b-t' },
                        { name: 'font-size', sence: 'font-size', example: 'c-font-size-s' },
                        { name: 'shadow', sence: '阴影', example: 'c-shadow-s' },
                        { name: 'round', sence: '圆角', example: 'c-round-s' },
                    ]
                },
            ]
        }
    }
}
</script>